<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蒂蒂的寻找热水壶之旅</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        * {
            pointer-events: none;
            margin: 0;
            padding: 0;
        }

        h2{
            opacity: .3;
            text-align: center;
        }

        body {
            position: relative;
            overflow: hidden;
        }

        .role {
            position: absolute;
            top: 0;
            left: 0;
            width: 120px;
            height: auto;
            transition: all .9s;
        }

        .role>img {
            width: 100%;
        }

        .bottle {
            z-index: -1;
            display: none;
            position: absolute;
        }

        .dialog{
            position: absolute;
            border: 2px solid rgb(33,66,100);
            width: 152px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: 600;
            color: rgb(17,80,142);
            border-radius: 10px;
            background-color: #fff;
            display: none;
        }

        .dialog::after{
            content: '';
            display: block;
            width: 0;
            border: 10px solid transparent;
            border-top: 10px solid rgb(33,66,100);
            transform: translateX(66px);
        }
    </style>
</head>

<body>
    <h2>点击鼠标移动位置，点击空格挖热水壶</h2>
    <div class="role">
        <img src="img/default.gif" alt="">
    </div>
    <div class="bottle">
        <img src="img/bottle.png" alt="">
    </div>
    <div class="dialog"></div>

    <script>
        let statu = 0; // 0 default 1 run 2 dig
        let endGame = false;
        let timer;
        let X, Y;

        randomPosition();

        // randomly create position
        function randomPosition() {
            X = Math.floor(Math.random() * window.innerWidth);
            Y = Math.floor(Math.random() * window.innerHeight);
            $('.bottle').css('top', `${Y}px`);
            $('.bottle').css('left', `${X}px`);
        }

        // click screen to control role move
        $(window).click((e) => {
            e.preventDefault();
            // get current element corrdinate and click coordinate
            let beginX = $('.role').offset().left;
            let beginY = $('.role').offset().top;
            let endX = e.offsetX;
            let endY = e.offsetY;
            let time = Math.sqrt((endX - beginX) * (endX - beginX) + (endY - beginY) * (endY - beginY)) /
                300; // culculate move time
            if (statu != 2) {
                $('.dialog').css('display', 'none');
                clearTimeout(timer);
                statu = 1; // set run
                $('.role img').attr('src', 'img/run.gif');
                $('.role').css('transition', `all ${time}s`);
                $('.role').css('top', `${endY - 64}px`);
                $('.role').css('left', `${endX - 60}px`);
                timer = setTimeout(() => { // clear run gif
                    statu = 0;
                    endGame ? $('.role img').attr('src', 'img/end.gif') :  $('.role img').attr('src', 'img/default.gif');
                }, time * 1000);
            } else return;
        })

        // keydown Space dig treasure
        $(window).keydown((e) => {
            // keydown Space
            if (e.keyCode === 32) {
                if (statu == 1) {
                    return;
                } else {
                    $('.dialog').css('display', 'none');
                    // console.log(parseInt($('.role').css('top')), parseInt($('.role').css('left')));
                    let digX = parseInt($('.role').css('left'));
                    let digY = parseInt($('.role').css('top'));
                    clearTimeout(timer);
                    statu = 2;
                    $('.role img').attr('src', 'img/dig.gif');
                    timer = setTimeout(() => { // clear 
                        statu = 0;
                        endGame ? $('.role img').attr('src', 'img/end.gif') :  $('.role img').attr('src', 'img/default.gif');
                        if(digX <= X + 90 && digX >= X - 110 && digY <= Y + 105 && digY >= Y - 40) {  // dig bottle
                            $('.bottle').css('display', 'block');
                            $('.role img').attr('src', 'img/end.gif');
                            endGame = true;
                        }else{
                            let distancce = Math.floor(Math.sqrt((X - digX) * (X - digX) + (Y - digY) * (Y - digY)));  // culculate distance
                            $('.dialog').html(`热水壶距离我${distancce}米`);
                            $('.dialog').css('display', 'block');  // give prompt
                            $('.dialog').css('top', `${digY - 50}px`);
                            $('.dialog').css('left', `${digX}px`);
                        }
                    }, 2000);
                }
            }
        })
    </script>
</body>

</html>